<template>
  <div class="key-personnel">
    <div class="value-block">
      <div class="text">在管总数</div>
      <div class="value">84</div>
    </div>
    <div class="progress-block">
      <div class="progress-item">
        <div class="title">前科人员</div>
        <div class="progress">
          <el-progress color="#FE6062" define-back-color="#0B2F51" :percentage="38" :stroke-width="10" text-color="#1890FF"></el-progress>
        </div>
      </div>
      <div class="progress-item">
        <div class="title">吸毒史</div>
        <div class="progress">
          <el-progress color="#FAAD14" define-back-color="#0B2F51" :percentage="28" :stroke-width="10" text-color="#1890FF"></el-progress>
        </div>
      </div>
      <div class="progress-item">
        <div class="title">精神障碍</div>
        <div class="progress">
          <el-progress color="#1890FF" define-back-color="#0B2F51" :percentage="22" :stroke-width="10" text-color="#1890FF"></el-progress>
        </div>
      </div>
      <div class="progress-item">
        <div class="title">其他</div>
        <div class="progress">
          <el-progress color="#52C41A" define-back-color="#0B2F51" :percentage="18" :stroke-width="10" text-color="#1890FF"></el-progress>
        </div>
      </div>
    </div>
    <div class="warning">
      <div class="title">近30天动态预警</div>
      <div class="value">12次</div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'KeyPersonnel'
}
</script>
<style scoped lang="scss">
.key-personnel{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .value-block{
    width: 100%;
    height: 100px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    .text{
      color: #fff;
      font-size: 14px;
      margin-right: 20px;
    }
    .value{
      font-family: 冷酷体;
      color: #32B4FF;
      font-size: 28px;
    }
  }
  .progress-block{
    width: 100%;
    margin-bottom:60px;
    .progress-item{
      width: 100%;
      height: 45px;
      display: flex;
      align-items: center;
      .title{
        font-family: 冷酷体;
        color: #fff;
        width: 90px;
      }
      .progress{
        width: calc(100% - 100px);
        margin-left: 10px;
      }
    }
  }
  .warning{
    display: flex;
    align-items: center;
    justify-content: center;
    .title{
      font-family: 冷酷体;
      color: #fff;
    }
    .value{
      color: #32B4FF;
      font-family: 冷酷体;
      margin: 0 50px;
    }
    .point{
      margin-right: 10px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      &:nth-child(3){
        background: #FF4D4F;
      }
      &:nth-child(4){
        background: #FAAD14;
      }
      &:nth-child(5){
        background: #52C41A;
      }
    }
  }
}
</style>
